<template>
    <div class="user-info">
        <el-card class="box-card" shadow="never" v-loading="queryUserLoading">
            <div class="avatar">
                <el-avatar :src="contactsInfo.avatar" :size="60"></el-avatar>
            </div>
            <div class="username">
                <span>{{ contactsInfo.nickname }}</span>
            </div>
            <div class="more">
                <el-descriptions class="margin-top" :column="1">
                    <el-descriptions-item label="账号">{{ contactsInfo.username }}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{ contactsInfo.email }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ contactsInfo.gender == 1 ? '男' : '女' }}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{ contactsInfo.note }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="bottom clearfix op-bottom">
                <el-button class="button" size="mini" @click="changeGroup(1)">修改分组</el-button>
                <el-button class="button" size="mini" @click="changeGroup(2)">修改备注</el-button>
                <el-button class="button" size="mini" type="primary">发起聊天</el-button>
                <el-button class="button" size="mini" type="danger" @click="changeGroup(3)">删除好友</el-button>
            </div>
        </el-card>
        <el-dialog :title="idx == 1 ? '修改分组' : '修改备注'" :visible.sync="dialogUpdateVisible" width="20%"
            :before-close="handleClose">
            <div v-if="idx == 1">
                <el-form ref="form" :model="form" label-width="60px">
                    <el-form-item label="分组">
                        <el-select v-model="form.groupId" placeholder="请选择分组">
                            <el-option :label="item.name" :value="item.id" v-for="item, index in groupList"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div v-else>
                <el-form ref="form" :model="form" label-width="60px">
                    <el-form-item label="备注">
                        <el-input v-model="form.note"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="submtChange" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "contacts-info",
    props: ['contactsInfo', 'queryUserLoading'],
    data() {
        return {
            dialogUpdateVisible: false,
            form: {
                note: null,
                groupId: null
            },
            idx: 1,
            loading: false
        }
    },
    methods: {
        changeGroup(idx) {
            this.idx = idx;
            if (idx == 1) this.getGroupList()
            else if (idx == 2) this.form.note = this.contactsInfo.note
            else {
                this.$confirm('此操作将删除联系人, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.submtChange()
                }).catch(() => {

                });
            }
            if (idx != 3) this.dialogUpdateVisible = true;
        },
        handleClose(done) {
            this.form = {
                note: null,
                groupId: null
            };
            done();
        },
        submtChange() {
            if (this.idx == 1) {
                this.updateGroup({
                    id: this.contactsInfo.id,
                    groupId: this.form.groupId
                })
            }
            else if (this.idx == 2) {
                this.updateGroup({
                    id: this.contactsInfo.id,
                    note: this.form.note
                })
            }
            else {
                this.updateGroup({
                    id: this.contactsInfo.id,
                    status: 2
                })
            }
        },
        async getGroupList() {
            this.groupLoading = true
            let res = await this.$store.dispatch('getGroupList')
            this.groupLoading = false
            if (!res.success) this.$global.resError(res)
        },
        async updateGroup(data) {
            this.loading = true
            let res = await this.$store.dispatch('updateContacts', data)
            this.loading = false
            if (!res.success) this.$global.resError(res)
            else {
                this.$message.success(res.message)
                this.getGroupList()
                if (this.idx == 2) this.contactsInfo.note = data.note
                else if(this.idx == 3) this.$emit("changeContactsInfo", null);
            }
        },


    },
    computed: {
        groupList() {
            return this.$store.state.im.groupList || []
        },
    },
}
</script>

<style scoped>
.user-info {
    width: 60%;
    margin: 0 auto;
}

.avatar {
    text-align: center;
}

.username {
    text-align: center;
    font-size: 20px;
    margin: 5px 0;
}

.more {
    margin-top: 10px;
    padding: 0 20px;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.op-bottom {
    text-align: right;
}
</style>